<template>
  <div>
    <el-main>
      <el-row>
        <el-col
          class="border"
          :xs="{span: 24, offset: 0}"
          :sm="{span: 18, offset: 3}"
          :md="{span: 14, offset: 5}"
          :lg="{span: 10, offset: 7}"
          :xl="{span: 8, offset: 8}"
        >
          <el-form
            :model="model"
            :rules="rules"
            ref="rules"
            status-icon
            label-width="100px"
            class="demo-ruleForm"
            label-position="left"
          >
            <el-form-item label="开始时间" prop="start_time">
              <el-date-picker
                type="datetime"
                v-model="model.start_time"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择开始时间"
                clearable
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" prop="end_time">
              <el-date-picker
                type="datetime"
                v-model="model.end_time"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择结束时间"
                clearable
              ></el-date-picker>
            </el-form-item>
            <el-form-item label-width="120px" label="试验方案上传" prop="methodURL">
              <el-upload
                ref="methodURL"
                :limit="1"
                :action="$http.defaults.baseURL+'/upload/uploadMethod'"
                :before-upload="methodBeforeUpload"
                accept=".pdf"
                :on-success="afterUploadMethod"
              >
                <el-button size="small" type="primary" icon="el-icon-upload">试验方案上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传不超过 20MB 的.pdf文件</div>
              </el-upload>
            </el-form-item>
            <el-form-item label-width="140px" label="安全卫生协议上传" prop="agreementURL">
              <el-upload
                ref="agreementURL"
                :limit="1"
                :action="$http.defaults.baseURL+'/upload/uploadAgreement'"
                :before-upload="agreementBeforeUpload"
                accept=".pdf"
                :on-success="afterUploadAgreement"
              >
                <el-button size="small" type="primary" icon="el-icon-upload">安全卫生协议上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传不超过 20MB 的.pdf文件</div>
              </el-upload>
            </el-form-item>
            <el-form-item label="试验简述" prop="description">
              <el-input
                v-model="model.description"
                placeholder="请说明添加项目的必要信息，方便管理员查看"
                type="textarea"
                rows="5"
                maxlength="60"
                show-word-limit
              ></el-input>
            </el-form-item>
            <el-form-item size="large">
              <el-button type="primary" @click="(updateProject('rules'))">修改提交</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-main>
  </div>
</template>

<style lang="scss" scoped>
@import "../../assets/styles/box-border.scss";
</style>>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      model: {
        projectID: "",
        description: "",
        start_time: "",
        end_time: "",
        reason: "",
        methodURL: "",
        agreementURL: "",
        token: ""
      },
      rules: {
        description: [
          {
            required: true,
            message: "请输入申请理由，用于审核",
            trigger: "change"
          },
          {
            min: 6,
            max: 60,
            message: "长度在 6 到 60 个字符",
            trigger: "change"
          }
        ],
        start_time: [
          { required: true, message: "请选择开始时间", trigger: "change" }
        ],
        end_time: [
          { required: true, message: "请选择结束时间", trigger: "change" }
        ],
        methodURL: [
          {
            required: true,
            message: "请选择上传的文件，不能为空",
            trigger: "change"
          }
        ],
        agreementURL: [
          {
            required: true,
            message: "请选择上传的文件，不能为空",
            trigger: "change"
          }
        ]
      }
    };
  },
  components: {
    // BmLocalSearch
  },
  computed: {
    ...mapState(["projectInfo", "userInfo"])
  },
  methods: {
    methodBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 20;
      if (!isRightSize) {
        this.$message.error("文件大小超过 20MB");
      }
      let isAccept = new RegExp(".pdf").test(file.type);
      if (!isAccept) {
        this.$message.error("应该选择.pdf类型的文件");
      }
      return isRightSize && isAccept;
    },
    agreementBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 20;
      if (!isRightSize) {
        this.$message.error("文件大小超过 20MB");
      }
      let isAccept = new RegExp(".pdf").test(file.type);
      if (!isAccept) {
        this.$message.error("应该选择.pdf类型的文件");
      }
      return isRightSize && isAccept;
    },
    afterUploadMethod(res) {
      if (res.code == 200) {
        //这里只用获取到名称就行了，主要是为了后面提交文件的时候把名称存到数据库中
        this.model.methodURL = res.data.methodURL;
        this.$message.success("试验方案文件传输成功");
      } else {
        this.$message.error("试验方案文件传输失败");
      }
    },
    afterUploadAgreement(res) {
      if (res.code == 200) {
        //这里只用获取到名称就行了，主要是为了后面提交文件的时候把名称存到数据库中
        this.model.agreementURL = res.data.agreementURL;
        this.$message.success("安全卫生协议文件传输成功");
      } else {
        this.$message.error("安全卫生协议文件传输失败");
      }
    },
    async updateProject(rules) {
      this.$refs[rules].validate(valid => {
        if (valid) {
          this.model.token = this.$store.state.token;
          //trim()函数是去掉两边空格的
          this.model.projectID = this.projectInfo.id;
          this.model.description = this.model.description;
          this.model.start_time = this.model.start_time;
          this.model.reason = this.projectInfo.reason;
          // console.log(typeof this.model.start_time);
          // console.log(this.model.start_time);
          this.model.end_time = this.model.end_time;
          this.model.agreementURL = this.model.agreementURL;
          this.model.methodURL = this.model.methodURL;
          this.$http.post("project/updateProjectById", this.model).then(res => {
            if (res.data.code == 200) {
              this.$message.success(
                `修改项目 ${res.data.data} 成功，等待管理员审核`
              );
              //想要实现返回的效果，其实就只用加上这一句代码就行了,
              this.$router.push("/home");
            }
            if (res.data.code == 300) {
              this.$message.error("系统繁忙");
            }
          });
        } else {
          return false;
        }
      });
    }
  },
  created() {
    this.model.projectID = this.projectInfo.id;
    this.model.description = this.projectInfo.description;
    this.model.start_time = this.projectInfo.start_time;
    this.model.end_time = this.projectInfo.end_time;
    this.model.reason = this.projectInfo.reason;
  }
};
</script>